<template>
  <div
    :style="{'width':width}"
    class="custom-tooltip">
    <div
      ref="hidden"
      class="kt-tooltip-input__hidden"
      style="position: fixed; left: -19800px;"><span>{{ label }}</span>{{ tipValue || value }}</div>
    <div
      ref="hidden-tip"
      class="kt-tooltip-input__hidden"
      style="position: fixed; left: -19800px; font-size: 12px;"><span>{{ label }}</span>{{ tipValue || value }}</div>
    <el-tooltip
      :placement="placement"
      :disabled="disabled"
      :effect="effect">
      <div slot="content">
        <div 
          ref="custom-tooltip-outer"
          class="custom-tooltip-outer"
          :style="{'-webkit-line-clamp': tipRows, 'max-width': '800px' }">
          {{ tipValue || value }}
        </div>
        <el-button v-if="isShowCopy" type="text" @click="copy">复制</el-button>
        <el-button v-if="isSowMore && isShowCopy" type="text" @click="getMore">查看更多</el-button>
      </div>
      <div
        @mouseenter="visibilityChange($event)"
        class="custom-tooltip-inner"
        :style="{'-webkit-line-clamp':rows, color: color}">
        <span :style="{color: labelColor || color, cursor: 'pointer'}">
          {{ label }}
        </span>
        {{ value }}
      </div>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'CustomTooltip',
  data () {
    return {
      disabled: true,
      isSowMore: false,
      tipRows: 3
    }
  },
  methods: {
    // 复制操作
    copy() {
      if (!document.execCommand('copy',false)) {
        // false则表示操作不被支持或未被启用
        return void alert('操作不被支持或未被启用')
      }
      let ip = document.createElement('input')
      ip.value = this.tipValue || this.value
      document.body.appendChild(ip)
      ip.select()
      document.execCommand('copy',false) // copy已经选中的内容
      ip.remove()
    },
    // 点击展开
    getMore() {
      this.tipRows += 3
      this.visibilityMore()
    },
    // 判断tooltip是否展示
    visibilityChange (event) {
      let ev = event.target
      let thisWidth = ev.offsetWidth // 元素的宽度
      let wordWidth = 0 // 文本内容的宽度
      this.$refs.hidden && (wordWidth = this.$refs.hidden.scrollWidth)
      this.disabled = this.tipValue ? false : (wordWidth / thisWidth <= this.rows)
      !this.disabled && this.visibilityMore()
    },
    visibilityMore() {
      // 全局设置了toop-tip最大宽度300
      let thisWidth = 280
      let wordWidth = 0 // 文本内容的宽度
      this.$refs['hidden-tip'] && (wordWidth = this.$refs['hidden-tip'].scrollWidth)
      this.isSowMore = wordWidth / thisWidth > this.tipRows
    }
  },
  props: {
    isShowCopy: {
      type: Boolean,
      default: true,
      required: false
    },
    label: {
      type: String,
      default: '',
      required: false
    },
    value: {
      type: [String, Number],
      default: ''
    },
    tipValue: {
      type: [String, Number],
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    rows: {
      type: Number,
      default: 1
    },
    color: {
      type: String,
      default: '',
      required: false
    },
    labelColor: {
      type: String,
      default: '',
      required: false
    },
    placement: {
      type: String,
      default: 'top'
    },
    effect: {
      type: String,
      default: 'dark'
    }
  }
}
</script>

<style lang="less">
.custom-tooltip {
  .custom-tooltip-inner {
    text-overflow: ellipsis;
    overflow: hidden;
    // tab页签无省略号优化-- 暂时注释
    // display: -webkit-box;
    // 下面两个有区别
    // word-wrap: break-word;
    word-break: break-all;

    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    cursor: pointer;
  }
}
.custom-tooltip-outer {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  // 下面两个有区别
  // word-wrap: break-word;
  word-break: break-all;

  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}
</style>
